<template>
  <div style="height:100vh;background-color: #dcdfe6;">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="开始称重" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- the content -->
    <div class="the-content">
      <div class="conne-bluetooth" @click="isConn = !isConn">
        <div :class="[this.isConn == false ? 'not-conn-div' : 'conn-div']">
          <i
            :class="[
              'iconfont',
              'icon-lanya',
              this.isConn == false ? '' : 'icon-conn-sty',
            ]"
          ></i>
        </div>
        <span
          :class="[this.isConn == false ? 'not-conn-sty' : 'conn-sty']"
          v-if="this.isConn"
          >已连接蓝牙秤</span
        >
        <span
          :class="[this.isConn == false ? 'not-conn-sty' : 'conn-sty']"
          v-else
          >未连接蓝牙秤</span
        >
      </div>
      <!--the  waste weight and  the waste info -->
      <div class="waste-info">
        <!-- the  waste weight -->
        <div class="waste-weight">
          <span>废物重量:</span>
          <span>{{ this.wasteWeight }}</span>
          <div v-show="isConn">
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="width:80px" @click="randomNum"
              >重新称重</el-button
            >
          </div>
        </div>
        <!-- THE Waste kind -->
        <div class="waste-kind">
          <span>废物类型:</span>
          <div>
            <van-button
              type="default"
              :style="{
                width: '29vw',
                margin: '0px 5px 10px 0px',
                color: '#ffffff',
              }"
              @click="wasteKind = index"
              :color="wasteKind == index ? '#67C23A' : '#666'"
              v-for="(item, index) in buttomList"
              :key="index"
              >{{ item }}</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <van-button
      type="primary"
      :style="{
        width: '100vw',
        position: 'absolute',
        bottom: '10px',
      }"
      to="/ScanColl/generateScanCode"
      >生成二维码</van-button
    >
  </div>
</template>

<script>
export default {
  name: "BeginWeight",
  data() {
    return {
      //   是否已经连接蓝牙
      isConn: true,
      wasteWeight: "请称重",
      wasteKind: 0,
      buttomList: [
        "感染性废物",
        "病理性废物",
        "化学性废物",
        "损伤性废物",
        "药物性废物",
      ],
    };
  },
  watch: {
    wasteWeight(newV) {
      this.wasteWeight = newV;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/ScanColl/ScanCodeCell",
      });
    },
    randomNum() {
      this.wasteWeight = Math.ceil(Math.random() * 100 + 10) + "kg";
    },
  },
};
</script>

<style lang="less" scoped>
.the-content {
  padding: 10px;

  & .conne-bluetooth {
    background-color: #ffffff;
    padding-right: 10px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    & .not-conn-sty {
      margin-left: 30px;
    }
    & .conn-sty {
      margin-left: 30px;
      color: #409eff;
    }
    .common-sty {
      width: 35px;
      height: 35px;
      line-height: 35px;
      border-radius: 50%;
    }

    & .not-conn-div {
      border: 1px solid #666;
      .common-sty();
    }

    & .conn-div {
      .common-sty();
      border: 1px solid #409eff;
    }

    & .icon-conn-sty {
      color: #409eff;
    }
  }
  & .waste-info {
    height: 250px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    color: #666;
    padding: 10px;
    & .waste-weight {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 0;
      height: 40px;
      span:nth-child(1) {
        display: block;
        width: 70px;
        margin-right: 10px;
      }
      span:nth-child(2) {
        display: block;
        // width: 100px;
        flex: 1;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }
    }

    & .waste-kind {
      display: flex;
      & span {
        width: 70px !important;
        display: block;
        margin-right: 10px;
      }
      & div {
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
        flex: 1;
      }
    }
  }
  .create-code {
    // position: absolute;
    // bottom: 0px;
    width: 1000px;
  }
}
</style>
